/*
 * @Author: szx
 * @Date: 2022-03-15 20:06:35
 * @LastEditTime: 2022-03-15 20:09:44
 * @Description:
 * @FilePath: \learn\MDN_JS学习\八股文\JSONP\jsonp.js
 */
const chars = 'abcdefghijklmnopqrstuvwxyz';

function randomString(strs, length) {
    let str = '';
    for (let i = 0; i < length; ++i) {
        str += strs[Math.floor(Math.random() * strs.length)];
    }
    return str;
}

const jsonp = ({ url, params, callbackName }) => {
    const generateURL = () => {
        let str = `jsoncallback=${callbackName}`;
        if (params) {
            str += Object.keys(params)
                .map((key) => `${key}=${params[key]}`)
                .join('&');
        }

        return `${url}?${str}`;
    };

    return new Promise((resolve, reject) => {
        callbackName = callbackName || randomString(chars, 10);
        let scriptEle = document.createElement('script');
        scriptEle.src = generateURL();
        document.body.appendChild(scriptEle);

        // 服务器返回字符串 'callbackName(data)'，浏览器解析即可执行
        // 在全局对象中添加处理回调方法
        window[callbackName] = (data) => {
            resolve(data);
            // 最后再移除不需要的 dom 节点，防止内存泄漏
            document.body.removeChild(scriptEle);
        };
    });
};

// 实例，使用菜鸟教程中提供的接口调用 jsonp 方法
jsonp({
    url: 'https://www.runoob.com/try/ajax/jsonp.php',
    callbackName: 'callbackFunction'
}).then((data) => {
    console.log(data);
});
